<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:a="https://github.com/pylonide/pylon" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="../ppc.js"></script>
    </head>
    <body>
        <a:skin src="../skins.xml" media-path="../images/" icon-path="../icons/" />
        
        <a:appsettings debug="0" />

        <style>
            .cls1{
                background : red;
                padding : 10px;
            }
            
            .cls2{
                background : green;
                padding : 10px;
            }
        </style>

        <a:bar skin="basic" class="{btn.value ? 'cls1' : 'cls2'}">
            test
        </a:bar>
        
        <div class="{btn.value ? 'cls1' : 'cls2'}">
            test
        </div>
        
        <a:button id="btn" state="true">test</a:button>
    </body>
</html>